import React from 'react';
import styles from './Header.module.css'; // css作为模块被加载
import { Input, Layout, Typography, Menu, Dropdown, Button } from 'antd';
import { GlobalOutlined } from '@ant-design/icons';
import { withRouter, RouteComponentProps } from 'react-router-dom';
import store from '../../redux/store';
import { changeLanguage, addLanguage } from '../../redux/action';
import { languageState } from '../../redux/reducer';
import { withTranslation, WithTranslation } from "react-i18next";
import { connect } from 'react-redux';


class HeaderComponents extends React.Component<RouteComponentProps & WithTranslation, languageState>{
    constructor(props) {
        super(props);
        const storeState = store.getState();
        this.state = {
            language: storeState.language,
            languageList: storeState.languageList
        }
    }
    componentDidMount() {
        store.subscribe(this.storeChange.bind(this)); // store发生改变时，自动触发storeChange方法
    }
    storeChange() {
        let storeState = store.getState();  // 得到当前state状态,包含所有store属性
        this.setState({
            language: storeState.language,
            languageList: storeState.languageList
        });  // 重新渲染 View
    }

    menuClickHandler = (e) => {
        console.log(e.key);
        let val = e.key;
        if (val === 'add') {
            store.dispatch(addLanguage({ name: '新的语言', code: 'new_lang' }));
        } else {
            store.dispatch(changeLanguage(val));
        }
    }
    render() {
        const { history, t } = this.props;
        return (
            <div className={styles['app-header']} >
                <div className={styles['top-header']}>
                    <Typography.Text>{t('header.slogan')}</Typography.Text>
                    <Dropdown.Button
                        style={{ marginLeft: 15 }}
                        overlay={
                            <Menu onClick={this.menuClickHandler}>
                                {this.state.languageList.map((item) => {
                                    return <Menu.Item key={item.code}>{item.name}</Menu.Item>
                                })}
                            </Menu>
                        }
                        icon={<GlobalOutlined />}>
                        {this.state.language === 'zh' ? '中文' : 'English'}
                    </Dropdown.Button>
                    <Button.Group className={styles['button-group']}>
                        <Button onClick={() => history.push("register")}>{t('header.register')}</Button>
                        <Button onClick={() => history.push("signIn")}>{t('header.signin')}</Button>
                    </Button.Group>
                </div>
                {/* 搜索 */}
                <Layout.Header className={styles['main-header']} >
                    <Typography.Title level={3} className={styles.title}>
                        {t('header.title')}
                    </Typography.Title>
                    <Input.Search placeholder='请输入关键字' className={styles['search-input']} />
                </Layout.Header>
                {/* 菜单 */}
                <Menu mode={'horizontal'} className={styles['main-menu']} >
                    <Menu.Item key={1}>{t('header.home_page')}</Menu.Item>
                    <Menu.Item key={2}>{t('header.weekend')}</Menu.Item>
                    <Menu.Item key={3}>{t('header.group')}</Menu.Item>
                    <Menu.Item key={4}>{t('header.backpack')}</Menu.Item>
                    <Menu.Item key={5}>{t('header.private')}</Menu.Item>
                    <Menu.Item key={6}>{t('header.cruise')}</Menu.Item>
                    <Menu.Item key={7}>{t('header.hotel')}</Menu.Item>
                    <Menu.Item key={8}>{t('header.local')}</Menu.Item>
                    <Menu.Item key={9}>{t('header.theme')}</Menu.Item>
                    <Menu.Item key={10}>{t('header.custom')}</Menu.Item>
                    <Menu.Item key={11}>{t('header.study')}</Menu.Item>
                    <Menu.Item key={12}>{t('header.visa')}</Menu.Item>
                    <Menu.Item key={13}>{t('header.enterprise')}</Menu.Item>
                    <Menu.Item key={14}>{t('header.high_end')}</Menu.Item>
                    <Menu.Item key={15}>{t('header.outdoor')}</Menu.Item>
                    <Menu.Item key={16}>{t('header.insurance')}</Menu.Item>
                </Menu>
            </div >
        );
    }
};

export const Header = connect()(withTranslation()(withRouter(HeaderComponents)));